<template>
	<el-card shadow="hover" header="欢迎" style="height: 100%;">
		<div class="welcome">
			<div class="logo">
				<img src="img/logo.png">
				<h2>欢迎使用任务看板</h2>
			</div>
			<div class="tips">
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-menu /></el-icon></div>
					<div class="tips-item-message">通过电子化任务卡片，让工作流程更透明，在线化协作更高效。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-promotion /></el-icon></div>
					<div class="tips-item-message">
						任务看板作为提高项目透明度和工作流效率的最简单方法之一，已被广泛应用于人力资源管理、活动管理、销售管理、库存管理等多种涉及跨部门协作的团队管理场景。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-milk-tea /></el-icon></div>
					<div class="tips-item-message">在一个界面实现任务全过程管理，操作更方便。</div>
				</div>
			</div>
			<div class="actions">
				<!--				<el-button type="primary" icon="el-icon-check" size="large" @click="godoc">文档</el-button>-->
			</div>
		</div>
	</el-card>
</template>

<script>
export default {
	title: "欢迎",
	icon: "el-icon-present",
	description: "项目特色以及文档链接",
	data() {
		return {}
	},
	created() {},
	methods: {
		godoc() {
			window.open("https://lolicode.gitee.io/scui-doc/")
		},
		getTooltipContent(descList) {
			return descList.map(item => item.value).join('\n');
		}
	}
}
</script>

<style scoped>
.welcome {
	height: 100vh;
	overflow: auto;
	padding-bottom: 50px;
}

.welcome .logo {
	text-align: center;
}

.welcome .logo img {
	vertical-align: bottom;
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
}

.welcome .logo h2 {
	font-size: 30px;
	font-weight: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tips {
	margin-top: 20px;
	padding: 0 40px;
}

.tips-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7.5px 0;
}

.tips-item-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 18px;
	margin-right: 20px;
	color: var(--el-color-primary);
	background: rgba(180, 180, 180, 0.1);
}

.tips-item-message {
	flex: 1;
	font-size: 14px;
}

.statusClass {
	width: 100%;
	/* height: auto;
	min-height: auto;
	max-height: 80%; */
	overflow: auto;
}

::v-deep .el-card__body {
	padding: 0 !important;
}
::v-deep .el-card {
	margin: 0 !important;
}

.tooltip-content {
	display: flex;
	align-items: center;
}

.grid-content {
	height: 90%;
	font-size: 14px;
	background: #fff;
	margin: 8px;
	margin-bottom: 0;
	padding: 5px;
	border-radius: 3px;

	.grid-title {
		width: 100%;
		display: flex;
		padding: 10px;
		justify-content: space-between;
		border-bottom: 1px solid #ebedf0;
	}

	.addr_class {
		font-size: 12px;
		color: #8f8f8f;
		margin: 0 10px;
	}

	.desc_row {
		height: calc(4 * 24px);
		margin: 5px;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* ::v-deep .el-col {
		max-width: 100% !important;
	} */

	.status_type {
		line-height: 24px;
		margin: 0 5px;
	}
}

.popsver_bj {
	width: 100%;
	background: #696969;
	color: #fff;
	/* font-size: 12px; */
	padding: 10px;
	border-radius: 8px;
}


.desc_round {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 5px;
	border: 1px solid #888;
	background: #c5c5c5;
	border-radius: 50%;
}

::v-deep .el-tooltip__popper {
	white-space: pre-wrap;
}

.actions {
	text-align: center;
	margin: 40px 0 20px 0;
}
</style>
